<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: orange;
        }
        
        #btn {
            margin-top: 150px;
        }
        .wrapper {
            position: absolute;
            left: -400px;
            
            width: 400px;
            height: 80px;
            background: yellow;
        }
        .show{
            position: absolute;
            right: -40px;
            top: 0;
            height: 80px;
            width: 40px;
            background: orange;
        }
        .three {
            width: 100px;
            height: 100px;
            opacity: 1;
            background: red;
            margin-top: 100px;
        }
        .four{
            margin-top: 50px;
            border: 1px solid blue;
        }
        .four>div{
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <button id="btn">run</button>
    <div class="wrapper">
        <div class="show"></div>
    </div>
    <div class="three"></div>
    <div class="four">
        <div class="four1"></div>
        <div class="four1"></div>
        <div class="four1"></div>
        <div class="four1"></div>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        var btn = document.getElementById('btn');
        var timer = null;
        btn.onclick = function () {
            startMove(div);
        }

        function startMove(obj) {
            clearInterval(timer);
            //速度10
            var iSpeed;
            timer = setInterval(function () {
                iSpeed = (300 - obj.offsetLeft) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (obj.offsetLeft === 300) {
                    clearInterval(timer);
                } else {
                    obj.style.left = obj.offsetLeft + iSpeed + 'px';
                }
            }, 10)
        }



        var oDivWrapper = document.getElementsByClassName('wrapper')[0];
        oDivWrapper.onmouseenter = function(){
            startMove1(this,0);
        }
        oDivWrapper.onmouseleave = function(){
            startMove1(this,-400)
        }
        
        function startMove1(obj,target) {
            clearInterval(timer);
            //速度10
            var iSpeed;
            timer = setInterval(function () {
                iSpeed = (target - obj.offsetLeft) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (obj.offsetLeft === target) {
                    clearInterval(timer);
                } else {
                    obj.style.left = obj.offsetLeft + iSpeed + 'px';
                }
            }, 10)
        };
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[sttr];
            }else{
                return window.getComputedStyle(obj,false)[attr];
            }
        };
        var oDivthree = document.getElementsByClassName('three')[0];
        oDivthree.onclick = function(){
            startMove2(this,50)
        };
        function startMove2(obj,target){
            var iSpeed,iCur;
            timer = setInterval(function(){
                // iSpeed = (target - getStyle(obj,'opacity'));
                iCur = parseFloat(getStyle(obj,'opacity')) * 100;
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == target){
                    clearInterval(timer);
                }else{
                    obj.style.opacity = (iCur + iSpeed) / 100;
                }
            },30)
        }

        var oDivfourArray = document.getElementsByClassName('four1');
        for(var i = 0;i<oDivfourArray.length;i++){
            oDivfourArray[i].onmouseenter = function(){
                startMove3(this,400);
            };
            oDivfourArray[i].onmouseleave = function(){
                startMove3(this,100);
            }
        };

         function startMove3(obj,target) {
            clearInterval(obj.timer);
            //速度10
            var iSpeed;
            obj.timer = setInterval(function () {
                iSpeed = (target - obj.offsetWidth) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (obj.offsetWidth === target) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = obj.offsetWidth + iSpeed + 'px';
                }
            }, 10)
        };
    </script>
</body>

</html>